import React, { useMemo } from "react";
import {
  Button,
  Card,
  Checkbox,
  Dialog,
  List,
  PullToRefresh,
  Toast,
} from "antd-mobile";
import PsgItem from "./PsgItem";
import { SwipeAction } from "antd-mobile";
import styles from "../css/psg.module.css";
import { useLoaderData, useSearchParams } from "react-router-dom";
import { delPsg } from "../../../api/info";
function PsgList(props) {
  let { list } = useLoaderData();
  let [sp, setSp] = useSearchParams();
  let obj = useMemo(() => Object.fromEntries(sp), [sp]);
  const onRefresh = () => {
    setSp(obj);
  };
  const oneChange = (arr) => {
    console.log(arr);
    if (typeof props.onChange === "function") {
      props.onChange(arr);
    }
  };
  const rightActions = [
    {
      key: "delete",
      text: "删除",
      color: "danger",
    },
  ];
  const onAction = (action, id) => {
    if (action.key === "delete") {
      Dialog.confirm({
        content: "确认删除吗？",
        async onConfirm() {
          await delPsg(id);
          Toast.show("删除成功");
          setSp(obj);
        },
      });
    }
  };
  return (
    <div className={styles.listbox}>
      <Card title="下拉可刷新乘客列表">
        <PullToRefresh onRefresh={onRefresh}>
          <List style={{ "--border-bottom": "none", "--border-top": "none" }}>
            <Checkbox.Group onChange={oneChange}>
              {list.map((item, i) => {
                return (
                  <SwipeAction
                    onAction={(action) => onAction(action, item.id)}
                    key={i}
                    rightActions={rightActions}
                  >
                    <PsgItem key={i} {...item} />
                  </SwipeAction>
                );
              })}
            </Checkbox.Group>
          </List>
        </PullToRefresh>
      </Card>
    </div>
  );
}

export default PsgList;
